<template>
  <div class="container">
    <!-- 总体卡片样式 -->
    <el-card class="myCard">
      <!-- 头部文本加新增试题 -->
      <div class="header-div">
        <span class="mySpan">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="small" @click="$router.push('/questions/new')"><i class="el-icon-edit"></i><span>新增试题</span></el-button>
      </div>
      <!-- from 表单区域 -->
      <div class="fromDiv">
      <el-form ref="form" :model="sizeForm" label-width="80px" size="small">
        <el-row :gutter="0">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="sizeForm.subjectID" placeholder="请选择" style="width: 100%;">
                <el-option :label="item.label" :value="item.value" v-for="item in SubjectList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="sizeForm.catalogID" placeholder="请选择" style="width: 100%;">
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="sizeForm.tags" placeholder="请选择" style="width: 100%;">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="sizeForm.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="sizeForm.questionType" placeholder="请选择" style="width: 100%;">
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in questionTypeList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="sizeForm.difficulty" placeholder="请选择" style="width: 100%;">
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in difficultyList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="sizeForm.direction" placeholder="请选择" style="width: 100%;">
                <el-option :label="item" :value="item" v-for="(item,index) in directionList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="sizeForm.creatorID" placeholder="请选择" style="width: 100%;">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="黑马" value="黑马"></el-option>
                <el-option label="123" value="123"></el-option>
                <el-option label="飞翔" value="飞翔"></el-option>
                <el-option label="duoduo" value="duoduo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="sizeForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="sizeForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
           <el-form-item label="城市">
                 <Mycity v-model="provAndCity"></Mycity>
                </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-form-item style="margin-left: 80px;">
              <el-button @click="ClearFn">清除</el-button>
              <el-button type="primary" @click="SearchFn">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </div>
      <!-- 总条数 -->
  <el-alert :title='Quantity' type="info" :closable="false" class="el-icon-info" style="margin-bottom: 15px;"></el-alert>
      <!-- 表格数据铺设 -->
  <div class="tableDiv">
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="number"
      label="试题编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="105">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="105">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="105">
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
      width="280">
      <template slot-scope="scope">
        {{scope.row.question}}
      </template>
    </el-table-column>
        <el-table-column
      prop="addDate"
      label="录入时间"
      width="180">
    </el-table-column>
        <el-table-column
      prop="difficulty"
      label="难度"
      width="102">
    </el-table-column>
        <el-table-column
      prop="creator"
      label="录入人"
      width="102">
    </el-table-column>
        <el-table-column
      label="操作"
      width="179"
      prop="id"
      >
    <template slot-scope="scope">
      <div style="width:179px;">
        <el-button font-size="12px" plain  size="small" type="primary" icon="el-icon-view" circle @click="ViewFn(scope.row.id)"></el-button>
        <el-button font-size="12px" plain  size="small" type="success" icon="el-icon-edit" circle @click="$router.push('/questions/new?id='+scope.row.id)"></el-button>
        <el-button font-size="12px" plain  size="small" type="danger" icon="el-icon-delete" circle @click.native="DelFn(scope.row.id)"></el-button>
        <el-button font-size="12px" plain  size="small" type="warning" icon="el-icon-check" circle @click.native="SelectedFn(scope.row.id)"></el-button>
    </div>
    </template>
    </el-table-column>
      </el-table>
  </div>
  <!-- 分页 -->
  <div class="PageDiv">
     <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pagesize"
      :current-page="page.page"
      layout="prev, pager, next,sizes, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :total="10"
      >
    </el-pagination>
  </div>
</el-card>
  <!-- 放置弹层组件 -->
  <el-dialog
  title="题目预览"
  width="900px"
  :visible.sync="isShow">
    <questionDialog @Close="isShow=false" :id="id"></questionDialog>
  </el-dialog>
</div>
</template>

<script>
import questionDialog from './companys/questionsDialog'
// 方向 难度  试题类型
import { direction, difficulty, questionType } from '../../api/hmmm/constants'
import Mycity from './companys/citys'
// 铺设页面数据和删除
import { Founlist, remove, choiceAdd } from '../../api/hmmm/questions'
// 转事件和标签API
import { html2Text, parseTimeByString } from '../../filters/index'
import { simple } from '../../api/hmmm/subjects'
export default {
  components: {
    questionDialog,
    Mycity
  },
  data () {
    return {
      ts: 0, // 数据总条数
      id: '', // 查看传入id
      isShow: false,
      provAndCity: {
        province: '',
        city: ''
      },
      SubjectList: [], // 学科
      sizeForm: {
        province: '', // 所在省份
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: [], // 方向
        creatorID: '', // 录用人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: ''// 所在城市
      },
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    // 题库列表
    this.loginAPI()
    // 方向  难度  试题类型
    this.direction()
    // 学科
    this.SubjectApi()
  },
  methods: {
    // 方向  难度  试题类型
    direction () {
      // 方向
      this.directionList = direction
      // 难度
      this.difficultyList = difficulty
      // 试题类型
      this.questionTypeList = questionType
    },
    // 每页多少条
    async  handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      // const rs = await Founlist(this.page)
      // console.log(rs)
      this.loginAPI()
      // this.tableData = rs.data.items
    },
    // 当前页
    async handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      // const rs = await Founlist(this.page)
      // console.log(rs)
      // this.tableData = rs.data.items
      this.loginAPI()
    },
    // 学科请求Api
    async SubjectApi () {
      const res = await simple()
      console.log(res.data)
      this.SubjectList = res.data
    },
    // 清除按钮
    ClearFn () {
      this.$confirm('确定要清除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sizeForm = {}
        this.provAndCity = {}
        this.$message.success('清除成功')
      }).catch(() => {
        this.$message.info('已取消清除')
      })
    },
    // 搜索按钮
    async SearchFn () {
      const res = await Founlist(this.sizeForm)
      if (res.data.items) {
        const name = res.data.items
        console.log(name)
        const list = name.map(item => {
          // 转换题干文本格式
          item.question = html2Text(item.question)
          // 判断题型
          if (item.questionType === '1') {
            item.questionType = '单选'
          } else if (item.questionType === '2') {
            item.questionType = '多选'
          } else if (item.questionType === '3') {
            item.questionType = '简答'
          }
          // 转换时间格式
          item.addDate = parseTimeByString(item.addDate)
          // 判断难度
          if (item.difficulty === '1') {
            item.difficulty = '简单'
          } else if (item.difficulty === '2') {
            item.difficulty = '一般'
          } else if (item.difficulty === '3') {
            item.difficulty = '困难'
          }
          return item
        })
        this.tableData = list
      }
    },
    // 列表APi
    async loginAPI () {
      const res = await Founlist(this.page)
      if (res.data.items) {
        const name = res.data.items
        const list = name.map(item => {
          // 转换题干文本格式
          item.question = html2Text(item.question)
          // 判断题型
          if (item.questionType.toString() === '1') {
            item.questionType = '单选'
          } else if (item.questionType === '2') {
            item.questionType = '多选'
          } else if (item.questionType === '3') {
            item.questionType = '简答'
          }
          // 转换时间格式
          item.addDate = parseTimeByString(item.addDate)
          // 判断难度
          if (item.difficulty === '1') {
            item.difficulty = '简单'
          } else if (item.difficulty === '2') {
            item.difficulty = '一般'
          } else if (item.difficulty === '3') {
            item.difficulty = '困难'
          }
          return item
        })
        this.tableData = list
        this.ts = this.tableData.length
      }
    },
    // 删除
    DelFn (id) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id: id })
        console.log(res)
        this.loginAPI()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 查看
    ViewFn (id) {
      this.id = id
      this.isShow = true
    },
    // 精选
    SelectedFn (id) {
      this.$confirm('确认添加到精选吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await choiceAdd({ id: id, choiceState: 1 })
        console.log(res)
        this.loginAPI()
        this.$message.success('添加到精选成功')
      }).catch(() => {
        this.$message.info('已取消精选')
      })
    }
  },
  computed: {
    // 数据总数量
    Quantity () {
      console.log(this.ts)
      return '数据一共 ' + this.ts * 1 + ' 条'
    }
  }
}
</script>

<style scoped lang='scss'>
// 盒子总体
.myCard {
  margin: 10px;
}
// 头部导航左边文字
.mySpan {
  font-size: 12px;
    color: pink;
}
// 头部盒子两端对齐
.header-div {
  display: flex;
  justify-content: space-between;
}
// from 表单的总体
.fromDiv{
  margin-top: 15px;
}
// layout布局
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
// 分页样式
.PageDiv{
  margin:20px 0 20px 0;
  float: right;
}
</style>
